<template>
	<div class="SingleVideoSelector" :style="`width:${$attrs.width};height:${$attrs.height}`">
		<div class="video_wrap">
			<video :src="src"></video>
			<div class="mask" @click="preview">
				<Icon name="VideoPlay" />
			</div>
		</div>
		<div class="btn">
			<a href="javascript:;" @click="openVideoSelector">
				<Icon :name="icon" />
			</a>
		</div>
		<div class="cover_wrap">
			<div class="cover">
				<SinglePicSelector v-model="videoPoster" />
				<div class="title">视频封面</div>
			</div>
		</div>
	</div>
	<VideoSelectorDialog v-model="isShowVideoSelector" :maxLength="1" @submit="getVideoList" />
	<VideoPreview v-model="isShowPreview" :src="src" />
</template>
<script>
import VideoPreview from './videoPreview/VideoPreview.vue';
import SinglePicSelector from '../pictureSelector/SinglePicSelector.vue';
import VideoSelectorDialog from './VideoSelectorDialog.vue';
export default {
	name: 'SingleVideoSelector',
	props: {
		modelValue: {
			type: String,
			default: '',
		},
		poster: {
			type: String,
			default: '',
		},
	},
	setup(props, { emit }) {
		const isShowVideoSelector = ref(false);
		const isShowPreview = ref(false);
		const src = computed({
			get() {
				return props.modelValue;
			},
			set(val) {
				emit('update:modelValue', val);
			},
		});
		const videoPoster = computed({
			get() {
				return props.poster;
			},
			set(val) {
				emit('update:poster', val);
			},
		});
		const icon = computed(() => (src.value ? 'Refresh' : 'Plus'));
		return {
			isShowVideoSelector,
			isShowPreview,
			icon,
			src,
			videoPoster,
			preview() {
				if (!src.value) return;
				isShowPreview.value = true;
			},
			openVideoSelector() {
				isShowVideoSelector.value = true;
			},
			getVideoList(videoList) {
				if (videoList.length === 0) return;
				const selectedVideo = videoList[0];
				src.value = selectedVideo.imgUrl;
			},
		};
	},
	components: { VideoPreview, SinglePicSelector, VideoSelectorDialog },
};
</script>
<style lang="scss" scoped>
.SingleVideoSelector {
	display: flex;
	.video_wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		background-color: #f5f7fa;
		video {
			width: 200px;
			// width: 100%;
		}
		&:hover {
			.mask {
				display: flex;
			}
		}
		.mask {
			display: none;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			cursor: pointer;
			.icon {
				color: var(--el-color-primary);
				font-size: 40px;
			}
		}
	}
	.btn {
		flex-shrink: 0;
		width: 100px;
		height: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
		a {
			display: block;
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			border: 1px solid var(--el-color-primary);
			border-radius: 4px;
		}
	}
	.cover_wrap {
		margin-left: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		.cover {
			.title {
				margin-top: 10px;
				text-align: center;
			}
		}
	}
}
</style>
